<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        width: 600px;
        margin: 10px auto;
      }

      .tb {
        border-collapse: collapse;
        width: 100%;
      }

      .tb th {
        background-color: #0094ff;
        color: white;
      }

      .tb td,
      .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
      }

      .tb img {
        width: 100px;
        height: 100px;
      }

      .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
      }

      button:disabled {
        color: red;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="add">
        <input v-model="productName" type="text" placeholder="品牌名称" />
        <input v-model="imgSrc" type="text" placeholder="产品图片地址" />
        <input v-model="price" type="text" placeholder="价格" />
        <button :disabled="isDisabled" @click="add">添加</button>
      </div>

      <div class="add">
        <input type="text" placeholder="请输入搜索关键字" v-model="keyword" />
      </div>

      <table class="tb">
        <thead>
          <tr>
            <th>
              <input type="checkbox" v-model="isAll" />
            </th>
            <th>产品图片</th>
            <th>编号</th>
            <th>品牌名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in list">
            <td>
              <input type="checkbox" v-model="checkedIds" :value="item.id" />
            </td>
            <td>
              <img :src="item.imgSrc" alt="" />
            </td>
            <td>{{ item.id }}</td>
            <td>{{ item.productName }}</td>
            <td>{{ item.price }}</td>
            <td>
              <button
                @click="update(item.id, item.count - 1)"
                :disabled="item.count === 1"
              >
                -
              </button>
              {{ item.count }}
              <button @click="update(item.id, item.count + 1)">+</button>
            </td>
            <td>
              <button @click="del(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="add">
        <p>勾选的商品Id有哪些：{{ checkedIds }}</p>
        <p>勾选的商品名称哪些：{{ checkedNames }}</p>
        <p>勾选的商品总价: {{ total }}</p>
      </div>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script>
      Vue.createApp({
        data() {
          return {
            keyword: "", // 搜索关键字
            list: [], // 用于存放商品的数据
            productName: "", // 品牌名称
            imgSrc: "", // 图片地址
            price: "", // 价格

            checkedIds: [1, 2], // 用于存放勾选的商品Id集合
          };
        },

        computed: {
          // 添加按钮是否需要禁用
          //    依赖项：productName、imgSrc、price
          isDisabled() {
            return !this.productName || !this.imgSrc || !this.price;
          },

          // 勾选商品的名称集合
          //    依赖项：checkedIds 、list
          checkedNames() {
            return this.list
              .filter((item) => this.checkedIds.includes(item.id))
              .map((item) => item.productName);
          },

          // 勾选的商品的总价
          //    依赖项：checkedIds 、list
          total() {
            return this.list
              .filter((item) => this.checkedIds.includes(item.id))
              .reduce((total, item) => {
                return (total += item.price * item.count);
              }, 0);
          },

          // 是否全选
          //    依赖项：checkedIds 、list
          // isAll() {
          //   return this.checkedIds.length === this.list.length;
          // },

          isAll: {
            get() {
              return this.checkedIds.length === this.list.length;
            },

            set(value) {
              // console.log("value", value);
              if (value) {
                // 全选
                //    将 this.list 中的 id 映射出来给到 checkedIds 即可。
                this.checkedIds = this.list.map((item) => item.id);
              } else {
                // 取消全选
                this.checkedIds = [];
              }
            },
          },
        },

        watch: {
          keyword(newVal) {
            console.log("newVal", newVal);
            // 调用 searchData()

            // 使用防抖的思路来优化代码
            clearTimeout(this.timer);

            this.timer = setTimeout(() => {
              this.fetchData(newVal);
            }, 300);
          },
        },

        methods: {
          // 搜索方法
          // searchData(value) {
          //   axios
          //     .get("http://localhost:3000/products", {
          //       // config

          //       //  params 就是 get 请求时 ? 号参数的配置
          //       params: {
          //         productName_like: value,
          //       },
          //     })
          //     .then((response) => {
          //       // console.log("response", response);
          //       // response 是 axios 一层包装对象，里面的 data 属性的值才是接口返回值
          //       const { data } = response;
          //       // console.log("data", data);
          //       // 将 data 数组，赋值给 状态数据 list
          //       this.list = data;
          //     });
          // },

          // 获取数据
          fetchData(searchValue = "") {
            axios
              .get("http://localhost:3000/products", {
                params: {
                  productName_like: searchValue,
                },
              })
              .then((response) => {
                // console.log("response", response);
                // response 是 axios 一层包装对象，里面的 data 属性的值才是接口返回值
                const { data } = response;
                // console.log("data", data);
                // 将 data 数组，赋值给 状态数据 list
                this.list = data;
              });
          },

          // 添加商品
          add() {
            // 在这儿做数据校验
            if (!this.productName || !this.imgSrc || !this.price) {
              return;
            }

            // 开始调用接口
            axios
              .post("http://localhost:3000/products", {
                // 请求体的参数
                code: 1,
                imgSrc: this.imgSrc,
                productName: this.productName,
                price: this.price,
                count: 1,
              })
              .then(({ data }) => {
                // console.log("data", data);

                // 直接再次调用查询的接口
                this.fetchData();
              });
          },

          // 删除商品
          del(id) {
            console.log("id", id);
            // 删除的二次确认
            const flag = window.confirm("你确认要删除吗？");
            if (!flag) {
              return;
            }

            // 调接口删除数据
            axios
              .delete(`http://localhost:3000/products/${id}`)
              .then(({ data }) => {
                alert("删除成功");

                // 重新调用 fetchData 获取最新的数据
                this.fetchData();
              });
          },

          // 更新数量
          update(id, count) {
            // 调用接口修改数据
            axios
              .patch(`http://localhost:3000/products/${id}`, {
                // 请求体，要修改的数据
                count,
              })
              .then(() => {
                // 重新获取最新数据渲染
                this.fetchData();
              });
          },
        },

        mounted() {
          // 默认调用一个 fetchData
          this.fetchData();
        },
      }).mount("#app");
    </script>
  </body>
</html>
